import list from './data.js';
import './index.css';
let ul = document.querySelector('.content > ul');
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
let totalBox = document.querySelector('.total');
let selectBox = document.querySelector('select');

let pageSize = 4; // 单页的页数
let total = 1; // 总页数
let current = 1; // 当前页数

// 渲染函数
randerHTML(); // 初次渲染 (首次调用)
function randerHTML() {
  // list 根据下拉框的值去取对应范围的数据
  let sliceListData = list.slice((current - 1) * pageSize, pageSize * current);

  console.log('sliceListData', sliceListData);
  // 字符串变量, 用于后期使用innerHTML
  let strHTML = '';

  // 把list数据渲染到ul结构上
  sliceListData.forEach((item) => {
    strHTML += `
    <li>
          <img src="${item.pic}" alt="" />
          <p>${item.name}</p>
          <p>城市: ${item.city}</p>
          <p>地址: ${item.address}</p>
          <p>价格: ${item.price}</p>
          <p>演出时间: ${item.showTime}</p>
    </li>
    `;
  });

  // 渲染到ul
  ul.innerHTML = strHTML;

  // 当前总页数 = list数据长度 / 单页的页数
  total = Math.ceil(list.length / pageSize);

  // 渲染当前页/总页数
  totalBox.innerHTML = `${current} / ${total}`;

  // 控制下一页和上一页的样式
  nextBtn.className = current >= total ? 'next disable' : 'next';
  prevBtn.className = current <= 1 ? 'prev disable' : 'prev';
}

// 下拉操作 (控制页数)
selectBox.addEventListener('change', () => {
  // console.log(selectBox.value);
  // 修改变量的值
  pageSize = Number(selectBox.value);
  console.log(pageSize);
  // 恢复第一页 (重置页数)
  current = 1;
  // 重新渲染页面
  randerHTML();
});

// 下一页
nextBtn.addEventListener('click', () => {
  if (current >= total) {
    return;
  }
  current++; // 每次自增页数
  randerHTML(); // 重新渲染页面结构
});

// 上一页
prevBtn.addEventListener('click', () => {
  if (current <= 1) {
    return;
  }
  current--; // 每次自减页数
  randerHTML(); // 重新渲染页面结构
});
